<template>
  <div class="body-box">
    <el-form
      label-position="left"
      label-width="80px"
      :rules="rules"
      :model="form"
      ref="form"
      :disabled="! is_edit  ? true : false"
    >
      <el-form-item label="组别名称" prop="name">
        <el-input placeholder="请输入组别名称" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="总人数" prop="total_people">
        <el-input placeholder="请输入总人数" type="number" v-model="form.total_people"></el-input>
      </el-form-item>

      <el-form-item label="是否收费" v-if="cation > 0">
        <el-switch
          v-model="form.is_pay"
          active-color="#8a70c6"
          inactive-color="#e1e1e1"
          @change="changePay"
        ></el-switch>
      </el-form-item>
      <div v-if="form.is_pay">
        <!-- 价格设定 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="标准价" prop="normal_price">
              <el-input placeholder="请输入标准价" type="number" v-model="form.normal_price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会员价" prop="vip_price">
              <el-input placeholder="请输入会员价" type="number" v-model="form.vip_price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="允许退款">
          <el-row>
            <el-col :span="2">
              <el-switch v-model="form.is_return" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
            </el-col>
            <el-col :span="12" v-if="form.is_return">
              <el-form-item label="截止时间" prop="return_time">
                <el-date-picker
                  v-model="form.return_time"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>-->
        <el-form-item label="早鸟价 ">
          <el-row>
            <el-col :span="2">
              <el-switch v-model="form.is_shift" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
            </el-col>
            <el-col :span="8" v-if="form.is_shift">
              <el-form-item label="早鸟价格" prop="shift_price">
                <el-input placeholder="请输入早鸟价" v-model="form.shift_price" type="number"></el-input>
              </el-form-item>
            </el-col>
            <span style="display:inline-block;width:20px; float:left;height:10px;"></span>
            <el-col :span="10" v-if="form.is_shift">
              <el-form-item label="截止时间" prop="shift_time">
                <el-date-picker
                  v-model="form.shift_time"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </div>
      <el-form-item label="报名审核">
        <el-switch v-model="form.is_verify" active-color="#8a70c6" inactive-color="#e1e1e1" @change="changeVerify"></el-switch>
      </el-form-item>
      <el-form-item label="代报名" v-if="form.form.length == 1 && !form.is_verify">
        <el-switch v-model="form.is_replace" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
      </el-form-item>
      <el-form-item label="报名项">
        <el-button
          type="warning"
          size="mini"
          @click="addTeamPeople()"
          icon="el-icon-plus"
          v-if="param > 1"
        >新增报名人</el-button>
        <el-button size="mini" icon="el-icon-view" class="com-btn" @click="seeViewForm(0)">预览</el-button>
      </el-form-item>
      <div class="tab-box-form">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item,key) in this.form.form" :key="key" :name="key.toString()">
            <span slot="label">
              报名人{{key + 1}}
              <i
                class="el-icon-close"
                @click.stop="deleteFormItem(key)"
                v-if="key > 0"
              ></i>
            </span>
            <div class="add-form-items">
              <div class='is-not-box' v-if="param > 1">
                <span>是否必填</span>
                <el-switch v-model="item.not_null" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
              </div>
              <add-form
                :form="item.data"
                :is_edit="key"
                @changenull="changeNotNull"
                @formsort="formSort"
                @changeselect="changeSelect"
                @delete="deleteForm"
                @selectinput="SelectInput"
              ></add-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="add-team-btn">
        <el-button class="com-btn" size="small" icon="el-icon-check" @click="submit()">立即提交</el-button>
      </div>
    </el-form>
    <!-- 模态框 -->
    <el-dialog
      :visible.sync="dialog_show"
      :append-to-body="true"
      width="500px"
      title="表单预览"
      :destroy-on-close="true"
    >
      <view-form :view_form="view_form"></view-form>
    </el-dialog>
    <!-- 禁止修改层 -->
    <!-- <div class="not-edit-box"></div> -->
  </div>
</template>

<script>
import addForm from "./form.vue";
import windowTitle from "../../../../components/unit/title.vue";
import viewForm from "./view.vue";

export default {
  components: { addForm, windowTitle, viewForm },
  props: {
    form_index: {},
    form_data: {},
    active_id: {},
    is_edit: {},
    param: {}
  },
  data() {
    return {
      cation : window.localStorage.getItem('cation'),
      dialog_show: false,
      view_form: {},
      form: {
        name: "",
        is_pay: false,
        normal_price: "",
        vip_price: "",
        total_people: "",
        is_shift: false,
        shift_price: "",
        shift_time: "",
        is_replace: false,
        is_verify: false,
        form: []
      },
      rules: {
        name: [{ required: true, message: "请输入组别名称", trigger: "blur" }],
        normal_price: [
          { required: true, message: "请输入标准价", trigger: "blur" }
        ],
        vip_price: [
          { required: true, message: "请输入会员价", trigger: "blur" }
        ],
        total_people: [
          { required: true, message: "请输入总人数", trigger: "blur" }
        ],
        return_time: [
          { required: true, message: "请选择退款截止时间", trigger: "blur" }
        ],
        shift_price: [
          { required: true, message: "请输入早鸟价", trigger: "blur" }
        ],
        shift_time: [
          { required: true, message: "请选择早鸟价截止时间", trigger: "blur" }
        ]
      },
      activeName: "0"
    };
  },
  mounted() {
    this.startTeamForm();
    if (this.form_data.name != "") {
      this.form = JSON.parse(JSON.stringify(this.form_data));
    }
  },
  methods: {
    //更改报名审核
    changeVerify(){
      this.form.is_replace = false;
    },
    //设置组别报名信息
    startTeamForm() {
      this.form.form = [];
      for (var i = 0; i < this.param; i++) {
        this.form.form.push({
          not_null: true,
          data: [
            {
              name: "姓名",
              not_null: true,
              type: "text",
              select: false,
              is_diy: false,
              data: []
            },
            {
              name: "联系方式",
              not_null: true,
              type: "number",
              select: false,
              is_diy: false,
              data: []
            }
          ]
        });
      }
      console.log(this.form.form);
    },
    //切换是否收费
    changePay(e) {
      if (e == false) this.form.is_shift = false;
    },
    //预览
    seeViewForm(key) {
      this.view_form = JSON.parse(JSON.stringify(this.form.form[key].data));
      this.dialog_show = true;
    },
    //提交
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          var form_temp = this.form.form[0].data;
          var form_str = "";
          
          for (var i in form_temp) {
            form_str += form_temp[i].name + "，";
          }
          if (this.form_index >= 0) {
            this.$parent.form_temp[this.form_index] = form_str;
            this.$parent.team_list[this.form_index] = this.form;
            this.$parent.updateInfo();
            
          } else {
            this.$parent.form_temp.push(form_str);
            this.$parent.team_list.push(this.form);
          }
          this.$forceUpdate();
          this.$parent.$layer.closeAll();
        } else {
          return this.toast(0, "表单填写不完整");
        }
      });
    },
    //新增报名项
    addTeamPeople() {
      var temp = JSON.parse(JSON.stringify(this.form.form[0]));
      this.form.form.push(temp);
      this.form.is_replace = false;
    },
    //判断是否在数组
    checkInArr(str) {
      var temp = this.form.form[0].data;
      for (var i in temp) {
        if (str == temp[i].name) return true;
      }
      return false;
    },
    //删除报名人
    deleteFormItem(key) {
      if (this.param == 2 && this.form.form.length == 2)
        return this.toast(0, "组队报名人数不能小于2");
      this.$confirm("确定删除该报名项", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.activeName = "0";
          this.form.form.splice(key, 1);
          this.$forceUpdate();
        })
        .catch(() => {});
    },
    //删除报名项
    deleteForm(e) {
      for (var i in this.form.form) {
        this.form.form[i].data.splice(e, 1);
      }
      this.$forceUpdate();
    },
    //修改select选项
    SelectInput(e) {
      for (var i in this.form.form) {
        this.form.form[i].data[e.index].data[e.key].label = e.label;
      }
      this.$forceUpdate();
    },
    //必填项改变
    changeNotNull(e) {
      for (var i in this.form.form) {
        this.form.form[i].data[e.key].not_null = e.res;
      }
    },
    //更改select
    changeSelect(e) {
      var index = e.index;
      var temp_obj = this.form.form[0].data[index];
      for (var i in this.form.form) {
        if (i > 0) {
          this.form.form[i].data[index] = temp_obj;
        }
      }
      this.$forceUpdate();
      // console.log(temp_obj);
    },
    //表单排序
    formSort(e) {
      var index = e.index;
      var param = e.param;
      for (var key in this.form.form) {
        var arr = [];
        var temp_arr = JSON.parse(JSON.stringify(this.form.form[key].data));
        if (param == 2) {
          var temp_i = index - 1;
          if (index - 1 < 2) return false;
        } else {
          var temp_i = index + 1;
          if (index == temp_arr.length - 1) return false;
        }
        for (var i in temp_arr) {
          if (i == temp_i) {
            arr.push(temp_arr[index]);
          } else if (i == index) {
            arr.push(temp_arr[temp_i]);
          } else {
            arr.push(temp_arr[i]);
          }
        }
        this.form.form[key].data = arr;
      }
      this.$forceUpdate();
    }
  },
  watch: {
    form: {
      handler(val, old) {
        var temp = val.form[0].data;
        var len = temp.length;
        for (var i in val.form) {
          if (i != 0) {
            var len1 = val.form[i].data.length;
            var len_num = len - len1;
            if (len_num > 0) {
              for (var x = len1; x < len; x++) {
                val.form[i].data.push(JSON.parse(JSON.stringify(temp[x])));
              }
            }
          }
        }
        this.$forceUpdate();
      },
      deep: true
    }
  }
};
</script>

<style>
.tab-box-form {
  position: relative;
}
.add-form-btn-p {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}
.add-form-items {
  border: 1px solid #f1f1f1;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
}
.add-team-btn {
  margin-top: 20px;
}
.add-team-people {
  text-align: center;
}
.add-form-items-name {
  font-size: 16px;
  padding-left: 10px;
  font-weight: bold;
}
.not-edit-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1;
}
.is-not-box{border-bottom: 1px solid #f1f1f1;padding:10px 0;}
.is-not-box > span{font-size: 14px;margin-right: 10px; }
</style>